<template>
  <form @submit.prevent="handleSubmit">
    <FormInput
      name="用户名"
      type="text"
      v-model="username"
      :error="usernameStatus.message"
    />
    <FormInput
      name="密码"
      type="password"
      v-model="password"
      :error="passwordStatus.message"
    />
    <button
      class="button is-primary"
      :disabled="!usernameStatus.valid || !passwordStatus.valid"
    >登录</button>
  </form>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from "vue";
import { Status, validate, length, required } from "@/utils/validators";
import FormInput from "@/components/FormInput.vue";
import {User} from "@/types"
import { useStore } from "@/store"
import { useModal } from "@/utils/useModal";
export default defineComponent({
  name: "NewPost",
  components: {
    FormInput,
  },
  setup() {
    const username = ref("username");
    const usernameStatus = computed<Status>(() => {
      return validate(username.value, [
        required(),
        length({ min: 5, max: 10 }),
      ]);
    });
    const password = ref("password");
    const passwordStatus = computed<Status>(() => {
      return validate(password.value, [
        required(),
        length({ min: 5, max: 10 }),
      ]);
    });
    const store=useStore()
    const modal=useModal()
    const handleSubmit=async (e:any) => {
        const user:User={
            id:-1,
            username:username.value,
            password:password.value
        }
      store.createUser(user)
       modal.hideModal()
    }
    return { username, usernameStatus,password,passwordStatus,handleSubmit };
  },
});
</script>

<style scoped>
    form{
        background-color:white;padding: 15px;
    }
</style>